<template>
	<div class="page-container">
		<!-- 下拉刷新 -->
		<van-pull-refresh v-model="main.pullRefresh" @refresh="onRefresh">
			<!-- 空状态 -->
			<van-empty v-if="main.ReimbursedList.length === 0"
				image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
				description="暂无报销记录" />

			<!-- 报销列表 -->
			<div class="list-container">
				<div v-for="(item, index) in currentPageData" :key="item.id" class="list-item">
					<!-- 顶部信息 -->
					<div class="item-header">
						<span class="item-index">{{ (currentPage - 1) * pageSize + index + 1 }}</span>
						<span class="item-date">{{ item.travelDate }}</span>
						<span class="item-amount">¥{{ item.travelExpenses }}</span>
					</div>

					<!-- 中间信息 -->
					<div class="item-content">
						<van-popover placement="top">
							<van-button size="mini" type="primary" @click="copyTravelReason(item.travelReason)">
								复制事由
							</van-button>
							<template #reference>
								<p class="item-reason">{{ item.travelReason }}</p>
							</template>
						</van-popover>
					</div>

					<!-- 底部信息 -->
					<div class="item-footer">
						<span class="item-address">{{ item.travelAddress }}</span>
						<span class="item-people">
							{{item.travelPeople.map(p => p.name).join('、')}}
						</span>
					</div>
				</div>
			</div>

			<!-- 分页控件 -->
			<van-pagination v-model="currentPage" :page-count="totalPages" :items-per-page="pageSize" mode="simple"
				prev-text="上一页" next-text="下一页" @change="handlePageChange" />
		</van-pull-refresh>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { showToast } from 'vant'
import dayjs from 'dayjs'
import { copy } from '@/utility/copyUtil'
import ReimbursedClass from './Reimbursed'
import { TTravelInfo } from '@/pages/AddTravelRecord/AddTravelRecord'
import * as indexedDB from '@utility/indexedDB'
import { DB } from '@/assets/global'

const main = reactive(new ReimbursedClass())
const currentPage = ref(1)
const pageSize = ref(10)

// 计算属性
const totalPages = computed(() => Math.ceil(main.ReimbursedList.length / pageSize.value))
const currentPageData = computed(() => {
	const start = (currentPage.value - 1) * pageSize.value
	const end = start + pageSize.value
	return main.ReimbursedList.slice(start, end)
})

// 复制事由
const copyTravelReason = (reason: string) => {
	copy(reason)
	showToast('复制成功')
}

// 刷新数据
const onRefresh = () => {
	getDBUnreimbursedList().then(() => {
		main.pullRefresh = false
		currentPage.value = 1 // 刷新后回到第一页
		showToast({
			message: "刷新成功",
			position: "top",
		})
	})
}

// 分页变化处理
const handlePageChange = (page: number) => {
	currentPage.value = page
	window.scrollTo(0, 0) // 回到顶部
}

// 获取数据
const getDBUnreimbursedList = async () => {
	const result: TTravelInfo[] = await indexedDB.queryAllByIndex(
		DB.store.TravelRecord.name,
		'isReimbursed',
		1
	)

	main.ReimbursedList = result
		.map(list => ({
			...list,
			travelPeople: Array.from(list.travelPeople),
		}))
		.sort((a: TTravelInfo, b: TTravelInfo) => {
			return dayjs(b.travelDate).diff(a.travelDate)
		})
}

// 初始化加载
getDBUnreimbursedList()
</script>

<style scoped lang="scss">
.page-container {
	padding: 12px;
	background-color: #f7f8fa;
	min-height: 100vh;
}

.list-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.list-item {
	background-color: #fff;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

	.item-header {
		display: flex;
		align-items: center;
		margin-bottom: 12px;

		.item-index {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			background-color: #2979ff;
			color: white;
			border-radius: 4px;
			font-size: 12px;
			margin-right: 12px;
		}

		.item-date {
			flex: 1;
			color: var(--van-text-color);
			font-size: 14px;
		}

		.item-amount {
			color: var(--van-danger-color);
			font-weight: bold;
		}
	}

	.item-content {
		margin-bottom: 12px;

		.item-reason {
			margin: 0;
			font-size: 15px;
			color: var(--van-text-color);
			line-height: 1.5;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.item-footer {
		display: flex;
		font-size: 13px;
		color: var(--van-gray-6);

		.item-address {
			max-width: 50%;
		}

		.item-people {
			flex: 1;
			text-align: right;
			white-space: normal;
			word-break: break-all;
			margin-left: 8px;
		}
	}
}

.van-pagination {
	margin: 20px 0;
	justify-content: center;
}
</style>